<!-- src/components/FooterComponent.vue -->
<template>
  <ul >
    <router-link to="/index/home" custom v-slot="{ navigate, href, isActive }">
      <li @click="navigate" :href="href" :class="isActive ? 'active': ''">
        <span class="iconfont  icon-shouye"></span>
        <p>首页</p>
      </li>
    </router-link>
    <router-link to="/index/baobao" custom v-slot="{ navigate, href, isActive }">
      <li @click="navigate" :href="href" :class="isActive ? 'active': ''">
        <span class=" iconfont icon-baihuochaoshi"></span>
        <p>抱抱团</p>
      </li>
    </router-link>
    <router-link to="/index/order" custom v-slot="{ navigate, href, isActive }">
      <li @click="navigate" :href="href" :class="isActive ? 'active': ''">
        <span class="iconfont  icon-dingdan"></span>
        <p>订单</p>
      </li>
    </router-link>
    <router-link to="/index/user" custom v-slot="{ navigate, href, isActive }">
      <li @click="navigate" :href="href" :class="isActive ? 'active': ''">
        <span class="iconfont icon-weibiaoti2fuzhi12"></span>
        <p>我的</p>
      </li>
    </router-link>
  </ul>
  </template>
  <style lang="scss" scoped>
    li {
      &.active { // li.active {}
        color: #f66;
      }
    }
   
  </style>